<template>
  <div class="about-page">
    <div class="search-container">
      <h2 class="section-title">关于我</h2>
      <div class="search-box">
        <i class="fas fa-search"></i>
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索技能或经验..." 
          @input="handleSearch"
        >
      </div>
    </div>
    <div class="about-container">
      <div class="about-header">
        <div class="about-avatar"></div>
        <h1>{{ profile.name }}</h1>
        <h2>{{ profile.title }}</h2>
      </div>
      
      <div class="about-content">
        <section class="about-section">
          <h3 class="section-subtitle">关于我</h3>
          <p>{{ profile.description }}</p>
        </section>
        
        <section class="about-section">
          <h3 class="section-subtitle">技能专长</h3>
          <div class="skills-grid">
            <div class="skill-card" v-for="skill in filteredSkills" :key="skill.name">
              <i :class="skill.icon"></i>
              <h4>{{ skill.name }}</h4>
              <div class="skill-level">
                <div class="skill-progress" :style="{ width: skill.level + '%' }"></div>
              </div>
            </div>
          </div>
        </section>
        
        <section class="about-section">
          <h3 class="section-subtitle">工作经历</h3>
          <div class="timeline">
            <div class="timeline-item" v-for="exp in filteredExperience" :key="exp.id">
              <div class="timeline-dot"></div>
              <div class="timeline-content">
                <h4>{{ exp.title }}</h4>
                <p class="timeline-company">{{ exp.company }}</p>
                <p class="timeline-date">{{ exp.period }}</p>
                <p class="timeline-description">{{ exp.description }}</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About',
  props: {
    profile: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      searchQuery: '',
      filteredSkills: [],
      filteredExperience: [],
      skills: [
        { name: 'Vue.js', icon: 'fab fa-vuejs', level: 90 },
        { name: 'JavaScript', icon: 'fab fa-js', level: 85 },
        { name: 'HTML5', icon: 'fab fa-html5', level: 95 },
        { name: 'CSS3', icon: 'fab fa-css3-alt', level: 90 },
        { name: 'Node.js', icon: 'fab fa-node-js', level: 80 },
        { name: 'Git', icon: 'fab fa-git-alt', level: 85 }
      ],
      experience: [
        {
          id: 1,
          title: '高级前端开发工程师',
          company: '星辰科技有限公司',
          period: '2021 - 至今',
          description: '负责公司核心产品的前端架构设计和开发，优化用户体验，提升产品性能。'
        },
        {
          id: 2,
          title: '前端开发工程师',
          company: '创新互联网科技',
          period: '2019 - 2021',
          description: '参与多个大型Web应用的开发，负责前端技术选型和团队技术培训。'
        },
        {
          id: 3,
          title: '初级前端开发',
          company: '未来科技有限公司',
          period: '2018 - 2019',
          description: '参与公司官网和内部系统的开发维护，负责前端页面实现和交互优化。'
        }
      ]
    }
  },
  watch: {
    skills: {
      immediate: true,
      handler(newSkills) {
        this.filteredSkills = [...newSkills]
      }
    },
    experience: {
      immediate: true,
      handler(newExp) {
        this.filteredExperience = [...newExp]
      }
    }
  },
  methods: {
    handleSearch() {
      const query = this.searchQuery.toLowerCase().trim()
      
      // 搜索技能
      this.filteredSkills = this.skills.filter(skill => 
        skill.name.toLowerCase().includes(query) ||
        skill.description.toLowerCase().includes(query)
      )
      
      // 搜索工作经历
      this.filteredExperience = this.experience.filter(exp => 
        exp.title.toLowerCase().includes(query) ||
        exp.company.toLowerCase().includes(query) ||
        exp.description.toLowerCase().includes(query)
      )
    }
  }
}
</script>

<style scoped>
.about-page {
  padding: 20px 0;
}

.about-container {
  background: var(--card-bg);
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.about-header {
  text-align: center;
  margin-bottom: 40px;
}

.about-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: linear-gradient(45deg, var(--primary), var(--secondary));
  border: 5px solid white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  color: var(--dark);
}

.about-header h2 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--primary);
}

.about-section {
  margin-bottom: 40px;
}

.section-subtitle {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--dark);
  position: relative;
  padding-bottom: 10px;
}

.section-subtitle:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.skill-card {
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.skill-card i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 10px;
}

.skill-card h4 {
  margin-bottom: 15px;
  color: var(--dark);
}

.skill-level {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 1s ease-in-out;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary-light);
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
}

.timeline-dot {
  position: absolute;
  left: -34px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--primary-light);
}

.timeline-content {
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.timeline-content h4 {
  color: var(--dark);
  margin-bottom: 5px;
}

.timeline-company {
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 5px;
}

.timeline-date {
  color: var(--gray);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.timeline-description {
  color: var(--gray);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .about-container {
    padding: 20px;
  }
  
  .skills-grid {
    grid-template-columns: 1fr;
  }
}

.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 0 15px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 300px;
}

.search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.search-box input {
  width: 100%;
  padding: 10px 12px 10px 35px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  font-size: 0.9rem;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

@media (max-width: 900px) {
  .search-container {
    padding: 0 10px;
    gap: 10px;
  }

  .search-box {
    max-width: 250px;
  }

  .search-box input {
    padding: 8px 12px 8px 32px;
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .search-container {
    padding: 0 2px;
    gap: 8px;
    margin-bottom: 15px;
  }

  .search-box {
    max-width: 100%;
  }

  .search-box input {
    padding: 6px 10px 6px 30px;
    font-size: 0.8rem;
  }
}
</style> 